<template>
  <div class="cyber-container" @click="triggerExplosion">
    <!-- 3D金属文字 -->
    <div class="metal-text-container" ref="metalTextContainer"></div>
    
    <!-- 故障效果遮罩 -->
    <div class="glitch-layers">
      <div class="glitch-layer" v-for="i in 5" :key="i" :style="glitchStyle(i)"></div>
    </div>
    
    <!-- 粒子爆炸场 -->
    <canvas ref="particleCanvas" class="particle-canvas"></canvas>
    
    <!-- 音频可视化 -->
    <canvas ref="audioCanvas" class="audio-canvas"></canvas>
    
    <!-- 暗黑科技UI -->
    <div class="cyber-ui">
      <div v-for="i in 12" :key="i" class="ui-line" :class="`ui-line-${i}`"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'

// DOM引用
const metalTextContainer = ref(null)
const particleCanvas = ref(null)
const audioCanvas = ref(null)

// 初始化3D文字
let scene, camera, renderer, textMesh
const initThreeJS = () => {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  metalTextContainer.value.appendChild(renderer.domElement)

  // 创建金属文字
  const loader = new THREE.FontLoader()
  loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', font => {
    const geometry = new THREE.TextGeometry('段玉康', {
      font: font,
      size: 3,
      height: 0.5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 0.1,
      bevelSize: 0.1
    })
    
    const material = new THREE.MeshPhysicalMaterial({
      color: 0xffffff,
      roughness: 0.3,
      metalness: 1.0,
      clearcoat: 1.0,
      clearcoatRoughness: 0.1,
      envMapIntensity: 2.5
    })
    
    textMesh = new THREE.Mesh(geometry, material)
    scene.add(textMesh)
    
    // 添加环境光
    const pmremGenerator = new THREE.PMREMGenerator(renderer)
    new THREE.RGBELoader()
      .load('https://threejs.org/examples/textures/hdr/venice_sunset_1k.hdr', texture => {
        const envMap = pmremGenerator.fromEquirectangular(texture).texture
        scene.environment = envMap
        material.envMap = envMap
        texture.dispose()
        pmremGenerator.dispose()
      })
  })
  
  camera.position.z = 10
  
  // 动画循环
  const animate = () => {
    requestAnimationFrame(animate)
    if (textMesh) {
      textMesh.rotation.x += 0.005
      textMesh.rotation.y += 0.01
    }
    renderer.render(scene, camera)
  }
  animate()
}

// 粒子系统
let particles = []
const initParticles = () => {
  const canvas = particleCanvas.value
  const ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  
  // 初始化粒子
  for (let i = 0; i < 300; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 4 + 1,
      speedX: Math.random() * 2 - 1,
      speedY: Math.random() * 2 - 1,
      color: `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.5 + 0.5})`
    })
  }
  
  const drawParticles = () => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    particles.forEach(p => {
      ctx.fillStyle = p.color
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
      ctx.fill()
      
      // 更新位置
      p.x += p.speedX
      p.y += p.speedY
      
      // 边界检查
      if (p.x < 0 || p.x > canvas.width) p.speedX *= -1
      if (p.y < 0 || p.y > canvas.height) p.speedY *= -1
    })
    
    requestAnimationFrame(drawParticles)
  }
  drawParticles()
}

// 音频可视化（模拟）
const initAudioVisualizer = () => {
  const canvas = audioCanvas.value
  const ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  
  const drawVisualizer = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.lineWidth = 2
    ctx.strokeStyle = '#ff00ff'
    
    // 模拟音频数据
    const dataArray = new Uint8Array(128)
    for (let i = 0; i < 128; i++) {
      dataArray[i] = Math.random() * 150 + 50
    }
    
    const sliceWidth = canvas.width / 128
    let x = 0
    
    ctx.beginPath()
    for (let i = 0; i < 128; i++) {
      const y = canvas.height - (dataArray[i] / 255 * canvas.height / 2)
      
      if (i === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
      
      x += sliceWidth
    }
    
    ctx.stroke()
    requestAnimationFrame(drawVisualizer)
  }
  drawVisualizer()
}

// 点击触发粒子爆炸
const triggerExplosion = () => {
  const canvas = particleCanvas.value
  const ctx = canvas.getContext('2d')
  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  
  // 创建爆炸粒子
  const explosionParticles = []
  for (let i = 0; i < 200; i++) {
    explosionParticles.push({
      x: centerX,
      y: centerY,
      size: Math.random() * 6 + 2,
      speedX: Math.random() * 8 - 4,
      speedY: Math.random() * 8 - 4,
      color: `hsla(${Math.random() * 360}, 100%, 50%, 0.8)`,
      life: 100
    })
  }
  
  const animateExplosion = () => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    explosionParticles.forEach((p, i) => {
      ctx.fillStyle = p.color
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
      ctx.fill()
      
      p.x += p.speedX
      p.y += p.speedY
      p.life--
      
      if (p.life <= 0) {
        explosionParticles.splice(i, 1)
      }
    })
    
    if (explosionParticles.length > 0) {
      requestAnimationFrame(animateExplosion)
    }
  }
  animateExplosion()
}

// 故障效果样式
const glitchStyle = (index) => {
  const offset = index * 5
  const speed = index * 0.3
  const hue = index * 72
  return {
    '--offset': `${offset}px`,
    '--speed': `${speed}s`,
    '--hue': `${hue}deg`
  }
}

onMounted(() => {
  initThreeJS()
  initParticles()
  initAudioVisualizer()
  
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    
    particleCanvas.value.width = window.innerWidth
    particleCanvas.value.height = window.innerHeight
    
    audioCanvas.value.width = window.innerWidth
    audioCanvas.value.height = window.innerHeight
  })
})
</script>

<style lang="less" scoped>
/* 基础容器 */
.cyber-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

/* 3D文字容器 */
.metal-text-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 故障效果 */
.glitch-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    hsl(var(--hue), 100%, 50%) 50%,
    transparent 55%
  );
  background-size: 200% 200%;
  animation: glitch-anim var(--speed) infinite alternate;
  opacity: 0.3;
  clip-path: polygon(
    0 calc(50% - var(--offset)),
    100% calc(50% - var(--offset)),
    100% calc(50% + var(--offset)),
    0 calc(50% + var(--offset))
  );
}

/* 粒子画布 */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* 音频可视化 */
.audio-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  mix-blend-mode: overlay;
  opacity: 0.7;
}

/* 赛博UI线条 */
.cyber-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  
  .ui-line {
    position: absolute;
    background: rgba(0, 255, 255, 0.1);
    
    /* 奇数线（水平） */
    &.ui-line-1 { top: 0%; }
    &.ui-line-3 { top: 10%; }
    &.ui-line-5 { top: 20%; }
    &.ui-line-7 { top: 30%; }
    &.ui-line-9 { top: 40%; }
    &.ui-line-11 { top: 50%; }
    
    /* 偶数线（垂直） */
    &.ui-line-2 { left: 0%; }
    &.ui-line-4 { left: 10%; }
    &.ui-line-6 { left: 20%; }
    &.ui-line-8 { left: 30%; }
    &.ui-line-10 { left: 40%; }
    &.ui-line-12 { left: 50%; }
    
    /* 公共样式 */
    &:nth-child(odd) {
      height: 1px;
      width: 100%;
      left: 0;
      box-shadow: 0 0 10px cyan;
    }
    &:nth-child(even) {
      width: 1px;
      height: 100%;
      top: 0;
      box-shadow: 0 0 10px magenta;
    }
  }
}

/* 动画定义 */
@keyframes glitch-anim {
  0% { background-position: 0 0; transform: skew(0deg); }
  20% { background-position: -5% -10%; transform: skew(5deg); }
  40% { background-position: 10% -30%; transform: skew(-3deg); }
  60% { background-position: -15% 20%; transform: skew(10deg); }
  80% { background-position: 25% 5%; transform: skew(-8deg); }
  100% { background-position: 0 0; transform: skew(0deg); }
}

/* 全局闪光效果 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle, #ff00ff 0%, transparent 70%) no-repeat 50% 50%,
    linear-gradient(135deg, #00ffff, #ff00ff, #ffff00);
  background-blend-mode: overlay;
  z-index: -1;
  opacity: 0;
  animation: flash 5s infinite;
}

@keyframes flash {
  0%, 35%, 65%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cyber-ui .ui-line {
    &:nth-child(odd) { top: auto; bottom: auto; }
    &:nth-child(even) { left: auto; right: auto; }
  }
}
</style>